<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../js/vue.js"></script>

<body>


    <!-- 
				Vue模板语法有2大类：
					1.插值语法：
							功能：用于解析标签体内容。
							写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
									 且可以直接读取到data中的所有属性。
							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

		 -->

    <div id="contain">
        <h1>hello ,{{name}}</h1> <!--- 插值语法 -->

        <h1>我的年龄是:{{age}}</h1>
        <a v-bind:href="url">{{test.name}}</a>
        <!-- 
            v-bind 动态绑定标签属性的值  
        -->
    </div>


    <script>

        // Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。



        //实例Vue
        new Vue({
            el: '#contain',
            data: {
                //data存了数据,但数据只供el容器里面的元素使用
                name: '黎黎',
                age: '20',
                url: 'https://www.4399.com',
                test: {
                    name: 'test'
                }

            }
        });



    </script>
</body>

</html>